<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-circle-plus-outline"></i> 员工添加
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form :model="empData" :rules="rules" ref="empData" label-width="100px" class="demo-ruleForm">

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="员工头像" prop="photo">
                                <div class="crop-demo">
                                    <img :src="cropImg" class="pre-img">
                                    <div class="crop-demo-btn">选择头像
                                        <input class="crop-input" type="file" name="photo" accept="image/*"
                                               @change="setImage"/>
                                    </div>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="员工名称" prop="name">
                                <el-input v-model="empData.name"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="手机号码" prop="phone">
                                <el-input v-model="empData.phone"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="员工密码" prop="password">
                                <el-input :placeholder="empData.password" type="password"
                                          v-model="empData.password"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="确认密码" prop="rePassword">
                                <el-input type="password" v-model="empData.rePassword"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="身份证号码" prop="identityCard">
                                <el-input v-model="empData.identityCard"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="员工邮箱" prop="email">
                                <el-input v-model="empData.email"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="出生日期" prop="birthday">
                                <el-date-picker
                                        v-model="empData.birthday"
                                        align="right"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="婚姻状态" prop="marriage">
                                <el-radio-group v-model="empData.marriage">
                                    <el-radio label="0">未婚</el-radio>
                                    <el-radio label="1">已婚</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="员工地址" prop="address">
                                <el-input v-model="empData.address"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="员工状态" prop="state">
                                <el-select v-model="empData.state" placeholder="请选择员工状态">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="员工岗位" prop="postIds">
                        <div class="col">
                            <el-checkbox-group v-model="empData.postIds" @change="groupChange">
                                <el-checkbox
                                        v-for="(item,index) in postList"
                                        :key="item.postId"
                                        :label="item.postName">
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </el-form-item>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="政治面貌" prop="poId">
                                <el-select v-model="empData.poId" placeholder="请选择员工政治面貌" class="handle-input mr10">
                                    <el-option
                                            v-for="item in politicalList"
                                            :key="item.poId"
                                            :label="item.poName"
                                            :value="item.poId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="员工学历" prop="edId">
                                <el-select v-model="empData.edId" placeholder="请选择员工学历" class="handle-input mr10">
                                    <el-option
                                            v-for="item in edNameList"
                                            :key="item.edId"
                                            :label="item.edName"
                                            :value="item.edId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="入职时间" prop="entryTime">
                                <el-date-picker
                                        v-model="empData.entryTime"
                                        align="right"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="角色" prop="roleIds">
                                <!--                                <el-cascader-->
                                <!--                                        class="handle-input me10"-->
                                <!--                                        :options="roleList"-->
                                <!--                                        :props="{multiple: true, checkStrictly: true }"-->
                                <!--                                        filterable-->
                                <!--                                        @change="handleChange"-->
                                <!--                                >-->
                                <!--                                </el-cascader>-->
                                <el-select v-model="empData.roleIds" placeholder="请选择员工角色" class="handle-input mr10">
                                    <el-option
                                            v-for="item in roleList"
                                            :key="item.roleId"
                                            :label="item.roleName"
                                            :value="item.roleId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('empData')">立即添加</el-button>
                                <el-button @click="resetForm('empData')">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import {educationList, politicalList, postList, roleList, addEmp} from "../../api/emp";
    import VueCropper from 'vue-cropperjs';
    import {uploadImg} from "../../api/emp";

    export default {
        name: "AddEmp",
        data() {
            let validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'))
                } else if (value !== this.empData.password) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback()
                }
            }
            let checkEmail = (rule, value, callback) => {
                const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
                if (!value) {
                    return callback(new Error('邮箱不能为空'))
                }
                setTimeout(() => {
                    if (mailReg.test(value)) {
                        callback()
                    } else {
                        callback(new Error('请输入正确的邮箱格式'))
                    }
                }, 100)
            }
            return {
                empData: {
                    photo: '',
                    name: '',
                    phone: '',
                    password: '',
                    rePassword: '',
                    identityCard: '',
                    email: '',
                    birthday: '',
                    marriage: '',
                    address: '',
                    state: '',
                    entryTime: '',
                    edId: '',
                    poId: '',
                    postIds: [],
                    roleIds: '',
                },
                edNameList: [],
                politicalList: [],
                postList: [],
                roleList: [],
                rules: {
                    name: [
                        {required: true, message: '请输入员工名称', trigger: 'blur'},
                        {min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入手机号码', trigger: 'blur'},
                        {min: 11, max: 11, message: '必须是数字,长度为 11 个数字', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入员工密码', trigger: 'blur'},
                        {min: 8, max: 11, message: '长度为 8 到 11 个数字', trigger: 'blur'}
                    ],
                    rePassword: [
                        {required: true, validator: validatePass, trigger: 'blur'},
                    ],
                    identityCard: [
                        {required: true, message: '请输入身份证号码', trigger: 'blur'},
                        {min: 18, max: 18, message: '长度为 18 个数字', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, validator: checkEmail, trigger: 'blur'},
                    ],
                    birthday: [
                        {required: true, message: '请选择出生日期', trigger: 'change'},
                    ],
                    marriage: [
                        {required: true, message: '请选择婚姻状态', trigger: 'change'},
                    ],
                    address: [
                        {required: true, message: '请输入地址', trigger: 'blur'},
                    ],
                    state: [
                        {required: true, message: '请选择员工状态', trigger: 'change'},
                    ],
                    entryTime: [
                        {required: true, message: '请选择入职时间', trigger: 'change'},
                    ],
                    postIds: [
                        {type: 'array', required: true, message: '请选择至少一个岗位(最多三个)', trigger: 'change'},
                    ],
                    edId: [
                        {required: true, message: '请选择政治面貌', trigger: 'change'},
                    ],
                    poId: [
                        {required: true, message: '请选择学历', trigger: 'change'},
                    ],
                    roleIds: [
                        {required: true, message: '请选择角色', trigger: 'change'},
                    ],
                },
                options: [{
                    value: '0',
                    label: '实习期'
                }, {
                    value: '1',
                    label: '正式员工'
                }],
                form: {
                    province: "",
                    city: "",
                },
                defaultSrc: require('../../assets/img/default.jpg'),
                fileList: [],
                imgSrc: '',
                cropImg: '',
            }
        },
        methods: {
            educationData() {
                educationList().then(res => {
                    this.edNameList = res.data;
                });
            },
            politicalData() {
                politicalList().then(res => {
                    this.politicalList = res.data;
                });
            },
            postData() {
                postList().then(res => {
                    this.postList = res.data;
                });
            },
            roleData() {
                roleList().then(res => {
                    console.log(res)
                    this.roleList = res.data;
                });
            },
            groupChange() {
                if (this.empData.postIds.length > 3) {
                    this.empData.postIds.shift();
                }
            },
            handleChange() {

            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(this.empData.roleIds)
                        addEmp(this.empData, this.empData.postIds).then(res => {
                            console.log(res)
                            if (res.data == null) {
                                this.$message({
                                    message: '恭喜你，成功添加一条员工信息！',
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: '添加数据信息错误！',
                                    type: 'warning'
                                });
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            //图片上传
            setImage(e) {
                const file = e.target.files[0];
                if (!file.type.includes('image/')) {
                    return;
                }
                const reader = new FileReader();
                reader.onload = (event) => {
                    this.dialogVisible = true;
                    this.cropImg = event.target.result;
                    this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
                };
                reader.readAsDataURL(file);
                let formData = new FormData();
                formData.append('image', file);
                uploadImg(formData).then(res => {
                    this.empData.photo = res;
                })
            },
            handleError() {
                this.$notify.error({
                    title: '上传失败',
                    message: '图片上传接口上传失败，可更改为自己的服务器接口'
                });
            }
        },
        created() {
            this.educationData();
            this.politicalData();
            this.postData();
            this.roleData();
            this.cropImg = this.defaultSrc;
        },
        components: {
            VueCropper
        },
    }
</script>

<style scoped>
    .content-title {
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }

    .pre-img {
        width: 100px;
        height: 100px;
        background: #f8f8f8;
        border: 1px solid #eee;
        border-radius: 5px;
    }

    .crop-demo {
        display: flex;
        align-items: flex-end;
    }

    .crop-demo-btn {
        position: relative;
        width: 120px;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        margin-left: 30px;
        background-color: #409eff;
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        box-sizing: border-box;
    }

    .crop-input {
        position: absolute;
        width: 100px;
        height: 40px;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }

    .box-card {
        width: 480px;
    }

    .col {
        background-color: #fff;
        height: 140px;
        overflow-y: auto;
    }

</style>